<script setup lang="ts">
import { ref, computed } from "vue";
import { tabMap } from "./list";

defineOptions({
  name: "FinanceProduct"
});
import { useMenu } from "@/utils/power";
const tabPowers = ["box", "water", "powerBank", "compute", "other"];
const power = useMenu([...tabPowers, "edit", "add", "delete"]);
const list = computed(() => {
  return tabPowers
    .filter(item => {
      return power.value[item];
    })
    .map(item => tabMap[item]);
});
const selected = ref(0);
function tabClick({ index }) {
  selected.value = index;
}
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>金融商品</h3>
        </template>
        <template #content>
          <div class="flex items-center text-[15px]">
            {{ list[selected] ? list[selected].title : "" }}
          </div>
        </template>
      </ElPageHeader>
    </template>
    <ElTabs v-model="selected" @tab-click="tabClick">
      <ElTabPane
        v-for="(item, index) in list"
        :key="index"
        :name="index"
        :label="item.title"
      >
        <component
          :is="item.component"
          v-if="selected == index"
          :type="item.type"
          :add="power.add"
          :edit="power.edit"
          :delete="power.delete"
        />
      </ElTabPane>
    </ElTabs>
  </ElCard>
</template>
<style scoped></style>
